<template>
  <div>
    <h1>绑定样式属性</h1>
    <div
      :style="{
        'background-color': pink,
        border: '2px solid pink',
        width: width,
        height: height + 'px'
      }"
    >
      <div
        :style="{
          backgroundColor: isblue ? blue : 'black',
          width: '50px',
          height: '20px'
        }"
      ></div>
      <div :style="mydiv"></div>
      <button @click="isblue = !isblue">blue切换</button>
      111
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const pink = "pink";
const width = "100px";
const height = "100px   ";
const mydiv = {
  width: "50px",
  height: "50px",
  background: "red"
};
const isblue = ref(true);
const blue = "blue";
</script>
<style></style>
